<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Toast } from "tdesign-mobile-vue";
import ImgList from "./imgList.vue";
import { queryGraphCategory, queryGraphList } from "@/api/editor/materials";
import { useEditor } from "@/views/Editor/app";
import usePageMixin from "@/mixins/pageMixin";

// 取得编辑器和全局分页信息
const { editor } = useEditor();
// 定义响应式数据
const pages = ref<Record<string, any>>({});
const visibleSticker = ref(false);
const keyword = ref('');
const currentCate = ref(null);
const cateList = ref([]);
const currentTab = ref(0);

// 事件发射器
const emit = defineEmits(['success']);

// 添加贴纸
const add = async (item) => {
    Toast({
        theme: 'loading',
        duration: 0,
        message: '正在加载贴纸',
        showOverlay: true,
    });
    // 此处可以添加获取轮廓的逻辑
    Toast.clear();
    emit('success', item.url);
};

// 打开和关闭贴纸选择器
const open = () => { visibleSticker.value = true; };
const hide = () => { visibleSticker.value = false; };

// 获取分类数据
const fetchData = async () => {
    try {
        const res = await queryGraphCategory();
        if (res.success) {
            cateList.value = res.data.records;
            cateList.value.forEach(cate => {
                if (!pages.value[cate.id]) {
                    pages.value[cate.id] = {
                        noMore: false,
                        dataList: [],
                        params: {
                            pageNum: 1,
                            pageSize: 30,
                            query:{categoryId: cate.id,}
                        },
                    };
                }
            });
            selectCate(0);
        }
    } catch (error) {
        console.error('获取分类失败', error);
    }
};

// 选择分类并加载数据
const selectCate = (index) => {
    currentCate.value = cateList.value[index];
    loadList(currentCate.value.id);
};

// 加载贴纸数据
const loadList = async (categoryId) => {
    const page = pages.value[categoryId];
    if (page.noMore) return; // 如果没有更多数据，直接返回

    try {
        const res = await queryGraphList(page.params);
        if (res.success) {
            const newDataList = res.data.records;
            page.dataList.push(...newDataList);
            page.params.pageNum += 1;
            page.noMore = page.dataList.length >= res.data.total;

            // 更新 pages 以触发响应性
            pages.value = { ...pages.value };
        }
    } catch (error) {
        console.error('加载贴纸失败', error);
    }
};

// 组件挂载时获取数据
onMounted(() => {
    fetchData();
});

// 暴露给外部调用的方法
defineExpose({
    add, open, hide,
});
</script>

<template>
    <t-popup v-model="visibleSticker" placement="bottom" destroy-on-close :showOverlay="false">
        <div>
            <div class="pop-header">
                <div class="title p-l-0! overflow-auto">
                    <t-tabs v-model="currentTab" :spaceEvenly="false" @change="selectCate">
                        <t-tab-panel
                                v-for="(item, index) in cateList"
                                :key="item.id"
                                :value="index"
                                :label="item.name"
                        />
                    </t-tabs>
                </div>
                <div class="btn btn--cancel" @click="hide">
                    <t-icon name="close-circle" size="18"></t-icon>
                </div>
            </div>

            <div class="pop-content">
                <img-list
                        v-for="(item, index) in cateList"
                        :key="'im_'+index"
                        v-show="currentCate.id === item.id"
                        :data="pages[item.id]?.dataList || []"
                        :no-more="pages[item.id]?.noMore || false"
                        @fetchData="loadList(item.id)"
                />
            </div>
        </div>
    </t-popup>
</template>

<style lang="less" scoped>
@import "../../../../styles/pop-style.less";
</style>
